<template>
	<view>
		<view class="white-bj border-r-15 a-center j-sp pad-t-30 pad-b-30 pad-l-30 pad-r-30 box-sizing">
			<view class="font-28 black20-zt font-w-b">余额明细</view>
			<view class="a-center pad-l-20 pad-r-20 border-r chengse-bj-10">
				<view class="font-24 line-h40 chengse-zt" @tap="open">日期选择</view>
				<view class="icon-xiala line-h40 font-22 chengse-zt"></view>
			</view>
		</view>
		<view class="wid-100 fenge"></view>
		<view class="list-box white-bj  position-relative border-r-15 pad-l-30 pad-r-30 box-sizing mar-top20" :style="{height:swiperHeight+'px'}">
			<scroll-view class="list" scroll-y @scrolltolower="loadMore">
				<block v-if="list.length>0">
					<view class="list-item d-flex pad-t-30 pad-b-30" v-for="(item,index) in list" :key="index">
						<view class="icon-shou ljm-icon chengse-zt" v-if="item.type==1"></view>
						<view class="icon-zhi ljm-icon blue-zt"v-else></view>
						<view class="info mar-left20 mar-right20">
							<view class="text-overflow font-24 black40-zt font-w-b line-h35">{{item.remark}}</view>
							<view class="chengse-zt font-22 line-h32 mar-top5" v-if="item.type==1">收入</view>
							<view class="blue-zt font-22 line-h32 mar-top5" v-else>支出</view>
							<view class="black60-zt font-22 line-h32 mar-top5">{{item.createtime|timeStanp}}</view>
						</view>
						<view class="item-money font-24 mar-l-a">
							<text v-if="item.type==1">+</text>
							<text v-else>-</text>
							<text class="font-26 font-w-b">{{item.money}}元</text>
						</view>
					</view>
					<!-- 上拉加载 -->
					<load-more :loadText="loadText"></load-more>
				</block>
				<block v-else>
					<!-- 无内容显示 -->
					<view class="nothing d-a-j">
						<image src="../../static/empty.png" mode="widthFix"></image>
						<view class="font-22 black60-zt text-center">没有更多记录...</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<!-- 弹窗 -->
		<view class="position-fixed p-bottom p-left p-right p-top black100-50" v-if="showLoding" @tap="close"></view>
		<view class="wid-100  white-bj fuwu-foot position-fixed p-bottom z-index99 box-sizing overflow-hidden" :style="{height:heightFoot+'px'}" v-if="showLoding">
			<view class="position-relative">
				<view class="text-center font-30 font-w-b">选择时间</view>
				<view class="icon-guanbi position-absolute p-right p-top font-28" @tap="close"></view>
			</view>
			<view class="mar-top50">
				<view class="a-center">
					<view class="font-26 mar-right15">起始时间:</view>
					<uni-datetime-picker type="date" returnType="timestamp" :clear-icon="false" v-model.number="query.created_start" @maskClick="maskClick" />
				</view>
				<view class="a-center mar-top30">
					<view class="font-26 mar-right15">截止时间:</view>
					<uni-datetime-picker type="date" returnType="timestamp" :clear-icon="false" v-model.number="query.created_end" @maskClick="maskClick" />
				</view>
				<view class="bottom position-fixed">
					<view class="font-28 main-bj border-r wid-100 line-h80 white-zt text-center" @tap="queding">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import loadMore from "@/pagesC/pages_com/load-more.vue"
	export default{
		components:{
			loadMore
		},
		data(){
			return{
				query:{
					aid:1,
					mid:undefined,
					created_start: undefined,
					created_end: undefined,
					page: 1,
					limit: 10
				},
				swiperHeight:500,
				count:0,
				loadText:"上拉加载更多",
				list:[],
				showLoding:false,
				heightFoot:300
			}
		},
		onLoad() {
			this.query.mid=parseInt(this.$user.state.userId)
			//获取列表的可视高度
			uni.getSystemInfo({
				success: (res) => {
					let height=res.windowHeight-uni.upx2px(200)  //获取可是窗口高度-tabbar的高度
					this.swiperHeight=height
				}
			});
			this.getShow()
		},
		filters:{
			timeStanp(dataTime){
				if (dataTime === undefined) { return }
				  const time = dataTime
				  const unixTimestamp = new Date(time * 1000)
				  const commonTime = unixTimestamp.toLocaleString('en-GB', { hour12: false })
				  const tim = commonTime.split('/')
				  const year = tim[2].split(',')[0]
				  const month = tim[1]
				  const day = tim[0]
				  const tt = tim[2].split(',')[1]
				  if (time === '') {
				    return ''
				  } else {
				    return year + '/' + month + '/' + day + tt
				  }
			}
		},
		methods:{
			//打开时间选择
			open(){
				this.showLoding=true
			},
			//关闭弹窗
			close(){
				this.showLoding=false
			},
			//时间查询
			queding(){
				this.query.page=1
				this.list=[]
				this.getShow()
				this.close()
			},
			//上拉加载事件
			async loadMore(){
				//判断如果文字不等于“上拉加载更多”，则不进行加载
				if(this.loadText!="上拉加载更多"){return}
				//改变加载时的文字
				this.loadText="努力加载中..."
				//模拟加载数据
				this.query.page++
				this.getShow()
			},
			//获取余额明细
			async getShow(){
				await this.$api.GetRechargeShow(this.query).then(res=>{
					if(res.code==0){
						this.list=[...this.list,...res.data.list]
						//计算是否还有
						let total_page=res.count/this.query.limit
						if(Number.isInteger(total_page)==true){
							total_page=total_page
						}else{
							total_page=Math.ceil(total_page)
						}
						if(this.query.page<total_page){
							this.loadText="上拉加载更多"
						}else{
							this.loadText="没有更多记录..."
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.fenge{
		height: 10rpx;
		background-color: #F6F6F6;
	}
	.list-box{
		.list-item {
			border-bottom: 2rpx solid #F6F6F6;
			.ljm-icon{
				width: 60rpx;
				height: 60rpx;
				font-size: 60rpx;
				line-height: 60rpx;
			}
			.info{
				width: 430rpx;
			}
			&:last-child{
				border-bottom:none;
			}
		}
	}
	.fuwu-foot{
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 30rpx 50rpx;
		
		.bottom{
			width: 660rpx;
			bottom: 50rpx;
			.cart{
				background-color: #7f72fa;
			}
		}
	}
	.nothing{
		image{
			width: 40%;
			margin: auto;
		}
	}
</style>